import { Form, Input, Modal } from 'antd';
import React from 'react';

interface Values {
  title: string;
  description: string;
  modifier: string;
}
interface CollectionCreateFormProps {
  open: boolean;
  onCreate: (values: Values) => void;
  onCancel: () => void;
}

/**
 * 修改图表页面
 *
 * */
const EditChart: React.FC<CollectionCreateFormProps> = ({ open, onCreate, onCancel }) => {
  const [form] = Form.useForm();
  return (
    <div className="edit-chart-page">
      <Modal
        open={open}
        title="修改图表"
        okText="提交修改"
        cancelText="取消"
        onCancel={onCancel}
        onOk={() => {
          form
            .validateFields()
            .then((values) => {
              form.resetFields();
              onCreate(values);
            })
            .catch((info) => {
              console.log('Validate Failed:', info);
            });
        }}
      >
        <Form
          form={form}
          layout="vertical"
          name="form_in_modal"
          initialValues={{ modifier: 'public' }}
        >
          <Form.Item name="name" label="图表名称">
            <Input />
          </Form.Item>
          <Form.Item name="description" label="分析目标">
            <Input type="textarea" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
export default EditChart;
